<template>
    <div>
        <Header />
        <div class="resourceWrapper">
            <div class="bannerWrapper">
                <img class="bannerImg" src="@/assets/img/straight_banner.jpg" alt="">
                <div class="mapNav">
                    <div class="indexContainer">
                        <img style="width: 12px; height: 15px" src="@/assets/images/industryNews30.png"
                            object-fit="contain" />
                        <span class="mapCurrent">当前位置：</span>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>直营专项</el-breadcrumb-item>
                            <el-breadcrumb-item>数据资源</el-breadcrumb-item>
                            <el-breadcrumb-item>资源详情</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>
            </div>
            <div class="indexContainer">
                <div class="detailContent" v-loading="loading">
                    <div class="detailCircle">
                        <h2 class="detailTitle">{{ resourceInfo.title }}</h2>
                        <div class="detailTip">
                            <span>发布人：{{ resourceInfo.issueName }}</span>
                            <span>发布时间：{{ resourceInfo.auditTime }}</span>
                            <span>
                                <i class="el-icon-view"></i> {{ resourceInfo.readRecord }}
                            </span>
                        </div>
                        <div class="detailLabel">
                            <el-row>
                                <el-col :span="12">
                                    <div class="labelItem"><span>联系人：</span>{{ resourceInfo.contacts }}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="labelItem"><span>联系电话：</span>{{ resourceInfo.contactsPhone }}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="labelItem"><span>适用行业：</span>{{ czyFormat(resourceInfo.industry) }}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="labelItem" v-if="resourceInfo.startTime">
                                        <span>有效期起止：</span>{{ resourceInfo.startTime.slice(0, 10) }}～{{ resourceInfo.endTime.slice(0, 10) }}
                                    </div>
                                </el-col>
                            </el-row>

                        </div>
                        <div class="detailItem">
                            <h3>资源概述</h3>
                            <p class="itemContent">{{ resourceInfo.summarize }}</p>
                        </div>
                        <div class="detailItem" >
                            <h3>资源详情</h3>
                            <p class="itemContent" v-html="resourceInfo.text"></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <Footer />
    </div>
</template>
<script>
import { operatedResourceDetail } from "@/request/api/operated"
import Header from "@/components/home/header/header";
import Footer from "@/components/home/footer/footer";
import { keyVal } from "@/request/api/link"
export default {
    components: {
        Header,
        Footer,
    },
    data() {
        return {
            id: this.$route.query.id,
            resourceInfo: {},
            loading:true,
            industryData:[]
        }
    },
    created() {
        this.getIndustryType()
        this.getDetail()
    },
    methods: {
        // 获取详情
        getDetail() {
            operatedResourceDetail(this.id).then(res => {
                this.loading=false
                if (res.data.code == 200) {
                    this.resourceInfo = res.data.result
                    document.querySelector('meta[name="keywords"]').setAttribute('content', res.data.result.keyword)
                    document.querySelector('meta[name="description"]').setAttribute('content', res.data.result.summarize)
                    document.title = res.data.result.title
                }
            })
        },
        // 下载
        handleDown(url) {
            window.open(url)
        },
        // 获取适用行业
        getIndustryType() {
            keyVal('applicable_industry ').then(res => {
                if (res.data.code === 200) {
                    this.industryData = res.data.result.items
                }
            })
        },
        czyFormat(row) {
            var name = "";
            this.industryData.forEach(function (item, index) {
                if (row == item.value) {
                    name = item.label;
                }
            });
            return name;
        },
        
    }
}
</script>
<style lang="less" scoped>
@import "./directOperated.less";
</style>
